<template>
  <div class="register-container">
    <div>
      <img :src="image.logo" alt="">
    </div>
    <div class="register-body">
      <div>
        <img :src="image.register" alt="">
      </div>
      <div class="body-right">
        <el-form :model="user" :rules="rules" ref="ruleFormRef">
          <div class="body-title">注册账号</div>
          <el-form-item prop="phoneNumber" class="input-phone-container">
            <el-input placeholder="请输入邮箱/手机号" v-model="user.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="rePassword">
            <el-input show-password placeholder="请确认密码" v-model="user.rePassword"></el-input>
          </el-form-item>
          <p class="choose-user">选择身份</p>
          <el-form-item class="role-select">
            <div class="teacher" :class="{active: user.type === 1}" @click="() => {user.type = 1}">
              <img :src="image.teacher" alt="">
              <span>老师</span>
            </div>
            <div class="student" :class="{active: user.type === 0}" @click="() => {user.type = 0;}">
              <img :src="image.student" alt="">
              <span>学生</span>
            </div>
          </el-form-item>
          <el-form-item prop="name">
            <el-input prefix-icon="User" placeholder="请输入姓名" v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item prop="schoolName">
            <el-input placeholder="请输入学校" v-model="user.schoolName"></el-input>
          </el-form-item>
          <el-form-item prop="infoNumber" v-if="user.type === 0">
            <el-input placeholder="请输入学号" v-model="user.infoNumber"></el-input>
          </el-form-item>
          <el-form-item prop="code" class="input-code-container">
            <el-input prefix-icon="Check" placeholder="请输入验证码"
                      class="el-input-valid-code"></el-input>
            <div class="valid-code">
              <valid-code @update:value="getCode"/>
            </div>
          </el-form-item>
          <el-form-item class="el-button-register-container">
            <el-button type="primary" class="el-button-register" @click="handelRegister(ruleFormRef)">注册</el-button>
          </el-form-item>
          <div class="bottom-text">
            <div>已有账号？<span @click="getToLogin">去登录</span></div>
          </div>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script setup>
import router from "../../router/index.js"
import {ref} from "vue";
import {image} from "../../assets/index.js";
import ValidCode from "../../components/ValidCode.vue";
import {register} from "../../api/user.js";
import {ElMessage} from "element-plus";

const code = ref('') //验证码组件传递过来的code

const roleTYpe = ref('')

const user = ref({
  phoneNumber: '',
  code: '',//表单用户输入的code
  name: '',
  password: '',
  rePassword: '',
  type: 1,
  infoNumber: '',
  schoolName: ''
})

const ruleFormRef = ref()

const validateRole = (rule, confirmPass, callback) => {
  if ((confirmPass === '' || confirmPass === undefined) && user.value.type === 0) {
    callback(new Error('请输入学号'))
  } else {
    callback()
  }
}

const validatePassword = (rule, confirmPass, callback) => {
  if (confirmPass === '') {
    callback(new Error('请输入密码'))
  } else if (confirmPass !== user.value.password) {
    callback(new Error('两次输入的密码不相等'))
  } else {
    callback()
  }
}

const validateCode = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else if (value.toLowerCase() !== code.value) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}

const rules = ref({
  phoneNumber: [{required: true, message: "请输入手机号", trigger: 'blur'}],
  username: [{required: true, message: "请输入姓名", trigger: 'blur'}],
  password: [{required: true, message: "请输入密码", trigger: 'blur'}],
  // code: [{validator: validateCode, trigger: 'blur'}],
  rePassword: [{validator: validatePassword, trigger: 'blur'}],
  name: [{required: true, message: "请输入姓名", trigger: 'blur'}],
  schoolName: [{required: true, message: "请输入学校/机构", trigger: 'blur'}],
  infoNumber: [{validator: validateRole, trigger: 'blur'}]
})

const getCode = (codeOfGet) => {
  code.value = codeOfGet.toLowerCase()
}

const getToLogin = () => {
  router.push("/")
}

const handelRegister = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      register(user.value).then(res => {
        if (res.code === 200) {
          router.push("/login")
          message('success', '注册成功')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const message = (type, text) => {
  ElMessage({
    message: text,
    type: type,
    plain: true,
  })
}
</script>
<style scoped>
.register-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #f8f9fa;

  > div:first-child {
    position: absolute;
    top: 48px;
    left: 62px;
    cursor: pointer;

    > img {
      width: 80%;
    }
  }
}

.register-body {
  display: flex;
//width: 80%; border-radius: 5px; //overflow: hidden; align-items: center; //justify-content: center;

  > div:first-child {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 791px;
    margin-right: -100px;

    > img {
      width: 791px;
    }
  }
}

.body-right {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 431px;
  height: fit-content;
  padding: 0 35px;

  :deep(.el-input):not(.el-input-valid-code) {
    height: 48px;
  }
}

.el-form {
  width: 360px;
}

.el-input-valid-code {
  width: 200px;
  height: 48px;
}

.body-title {
  text-align: center;
  margin: 20px 0;
  font-size: 22px;
  font-weight: 700;
}

.input-phone-container {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 16px;
}

:deep(.el-form-item__content) {
  justify-content: space-between;
}

.active {
  border-color: #4285f4 !important;
}

.teacher {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  max-width: 140px !important;
  border: 1px solid white;

  > img {
    width: 42px;
    height: 42px;
    margin-right: 9px;
  }

  > span {
    font-size: 14px;
  }
}

.student {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  max-width: 140px !important;
  border: 1px solid white;

  > img {
    width: 42px;
    height: 42px;
    margin-right: 9px;
  }
}

.input-code-container {
  :deep(.el-input) {
    flex: 1;

  }
}

.choose-user {
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  height: 36px;
}

.valid-code {
  flex: 1;
}

.el-button-register {
  width: 100%;
  height: 48px;
  background-color: #4285f4;
}

.el-button-register-container {
  margin-bottom: 10px;
}

.bottom-text {
  display: flex;
  font-size: 14px;
  flex-direction: row-reverse;
  padding-bottom: 12px;

  > div {
    > span {
      color: #4285f4;
      cursor: pointer
    }
  }
}
</style>
